<template>
	<div class="bigView">
		<view class="topView">
			<image src="../../static/img/dcjy/bg_jianbian.png" style="width: 100vw;"></image>
		</view>
		<view class="topView2" :style="[{height:CustomBar+20 + 'px'}]">
			<view class="title" :style="[{height:'44px',marginTop: StatusBar+'px'}]">
				嘉园服务
			</view>
		</view>
		<!-- <view class="cu-custom" :style="[{height:TopHeight + 'px'}]">
			<view class="title" :style="[{height:'44px',marginTop: StatusBar+'px'}]">
				嘉园服务
			</view>
		</view> -->
		<view class="contentBg" :style="[{marginTop: StatusBar+70+'px'}]" v-if="isAuth">
			<view class="first-item2">
				<span style="padding-left: 16px;color: #313742;font-size: 34rpx;">服务大厅</span>
			</view>
			<view class="first" >
				<u-grid
					:border="false"
					col="3"
					style="padding-top: 5px;margin-top: 10rpx;"
					@click="click"
				>
					<u-grid-item
						v-for="(listItem,listIndex) in list"
						:key="listIndex"
					>
						<u-icon
							:customStyle="{marginTop:30+'rpx'}"
							:name="listItem.name"
							:size="30"
						></u-icon>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="first-item2" style="margin-top: 40rpx;">
				<span style="padding-left: 16px;color: #313742;font-size: 34rpx;">积分乐园</span>
			</view>
			<view class="first" :style="[{marginTop: 0+'px'}]">
				<u-grid
					:border="false"
					col="3"
					style="padding-top: 5px;margin-top: 10rpx;"
					@click="integralClick"
				>
					<u-grid-item
						v-for="(listItem,listIndex) in list2"
						:key="listIndex"
					>
						<view style="position: relative;">
							<view class="unRead" v-if="listIndex==0 && unReadCount!='0'">{{unReadCount}}</view>
							<view style="display: flex;flex-direction: column;align-items: center;">
								<u-icon
									:customStyle="{paddingTop:30+'rpx'}"
									:name="listItem.name"
									:size="30"
								></u-icon>
								<text class="grid-text">{{listItem.title}}</text>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="jiarenshouce" @click="jiarenshouceHandle">
				
				<view style="display: flex;flex-direction: row;align-items: center;">
					<image src="../../static/img/fuwudating/icon_shouce.png" style="width: 54rpx;height: 54rpx;margin-left: 35rpx;"></image>
					<view class="left" style="color: #313742;font-size: 30rpx">嘉人手册</view>
				</view>
				<view style="display: flex;flex-direction: row;margin-right: 16px;align-items: center;">
				  <view style="color: #98A1B3;font-size: 26rpx;margin-right: 16rpx;">查看</view>
				  <image src="../../static/img/ic_arrowgray.png" style="width: 6px;height: 10px;"></image>
				</view>
			</view>
		</view>
		<view class="contentBg2" :style="[{marginTop: StatusBar+70+'px'}]" v-else>
			<view>
				您还未实名认证，是否现在去完成认证？
			</view>
			<view class="authView" @click="authHandle">
				去认证
			</view>
		</view>
	</div>
</template>
	
<script>
	import mine from '@/api/mine.js'
	import points from '@/api/points.js'
	export default{
		data(){
			return{
				StatusBar: this.StatusBar,
				CustomBar: 0,//this.$statusBarHeight
				TopHeight:0,
				userInfo:{},
				userInfo2:{},
				isAuth:false,
				list: [{
					name: '/static/img/fuwudating/icon_baodao.png',
					title: '嘉人报到',
					id:0
					},
					{
						name: '/static/img/fuwudating/icon_zhinan.png',
						title: '办事指南',
						id:1
					},
					{
						name: '/static/img/fuwudating/icon_personal_infor_search.png',
						title: '个人信息查询',
						id:2
					},
					{
						name: '/static/img/fuwudating/icon_man_hour_search.png',
						title: '工时查询',
						id:3
					},
					{
						name: '/static/img/fuwudating/icon_wage_search.png',
						title: '工资查询',
						id:4
					},
					// {
					// 	name: '/static/img/fuwudating/icon_wage_search.png',
					// 	title: '年假查询',
					// 	id:6
					// },
					{
						name: '/static/img/fuwudating/icon_zhihuiyuanqu.png',
						title: '智慧园区入口',
						id:5
					},
				],
				list2: [
					{
						name: '/static/img/fuwudating/icon_jiaban.png',
						title: '积分领取',
						id:0
					},{
					name: '/static/img/fuwudating/icon_qingjia.png',
					title: '积分查询',
					id:1
					},
					{
						name: '/static/img/fuwudating/icon_xiaojia.png',
						title: '积分规则',
						id:2
					},
					// {
					// 	name: '/static/img/fuwudating/icon_jiaban.png',
					// 	title: '积分兑换',
					// 	id:2
					// }
				],
				unReadCount:'0'
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
		},
		// onTabItemTap(item) {
		// 	console.log(item)
		// 	this.initUserInfo()
		// },
		onShow() {
			// this.$nextTick(() =>{
				this.initUserInfo()
			// })
		},
		methods:{
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo)
					this.getUserHandle()
				}else{
					uni.setStorageSync("uni_session","")
					uni.setStorageSync("userInfo","")
					setTimeout(() => {
						uni.hideLoading()
						uni.reLaunch({
							url:'/pages/login/login'
						})
					},500)
				}
				this.getUnreadMarks()
			},
			getUnreadMarks(){
				points.getUnreadMarks({}).then(res=>{
					this.unReadCount = res
				}).catch(err=>{
					
				})
			},
			getUserHandle(){
				mine.getUserHandle({id:this.userInfo.id}).then(res =>{
					this.userInfo2 = res;
					if (Object.keys(this.userInfo2).length>0 && this.userInfo2.dutyStatus == 2) {
						this.isAuth = true;
					}
				}).catch(err =>{
					
				})
			},
			authHandle(){
				uni.navigateTo({
					url: '/pageageMine/pages/completeInfo'
				})
			},
			click(value){
				console.log(value)
				switch (value){
					case 0://嘉人报到
						uni.navigateTo({
							url:'/packageJyserve/pages/jiaRenReport/index'
						})
						break;
					case 1://办事指南
						uni.navigateTo({
							url:'/packageJyserve/pages/instruction/index'
						})
						break;
					case 2://个人信息查询
						uni.navigateTo({
							url:'/pageageMine/pages/personInfo'
						})
						break;
					case 3://工时查询
						// uni.previewImage({
						// 	indicator: "none",
						// 	loop: false,
						// 	urls: ['https://l-cllyert.oss-accelerate.aliyuncs.com/video_file/时薪图片.JPG'],
						// })
						uni.navigateTo({
							url: "/packageJyserve/pages/workhour/index"
						})
						// uni.navigateTo({
						// 	url:"/packageJyserve/pages/hourlyWage/index?type=3"
						// })
						break;
					// case 4://工资查询
					// 	uni.previewImage({
					// 		indicator: "none",
					// 		loop: false,
					// 		urls: ['https://l-cllyert.oss-accelerate.aliyuncs.com/video_file/月薪图片.JPG'],
					// 	})
					// 	break;
					case 4://工资查询
						// uni.previewImage({
						// 	indicator: "none",
						// 	loop: false,
						// 	urls: ['https://l-cllyert.oss-accelerate.aliyuncs.com/video_file/WechatIMG15195.jpg'],
						// })
						uni.navigateTo({
							url:"/packageJyserve/pages/hourlyWage/index?type=1"
						})
						break;
					// case 5://年假查询
					// 	uni.navigateTo({
					// 		url:"/packageJyserve/pages/hourlyWage/index?type=2"
					// 	})
					// 	break;
					case 5://智慧园区
						uni.navigateTo({
							url:'/packageJyserve/pages/zhyq/index'
						})
						break;
					default:
						break;
				}
			},
			integralClick(value){
				switch (value){
					case 0://积分查询
						
						uni.navigateTo({
							url: '/packageJyserve/pages/pointsCollection/index'
						})
						break;
					case 1://积分规则
						// uni.navigateTo({
						// 	url:"/packageJyserve/pages/integral/rule"
						// })
						uni.navigateTo({
							url: '/packageJyserve/pages/recordsDetail/index'
						})
						
						break;
					case 2://积分兑换
						// uni.navigateTo({
						// 	url:"/packageJyserve/pages/exchangeRecords/index"
						// })
						uni.navigateTo({
							url: '/packageHome/pages/carbonNeutrality/detail?id='+"&type=" +"&sourceType=4"
						})
						break;
					default:
						break;
				}
			},
			jiarenshouceHandle(){
				uni.navigateTo({
					url: '/packageJyserve/pages/jirenshouce/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.unRead{
		position: absolute;
		right: -20px;
		top: 5px;
		background-color: red;
		color: #FFFFFF;
		font-size: 12px;
		z-index: 2;
		height: 20px;
		min-width: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
	}
	.cu-custom{
		background-color: orange;
		/* display: flex; */
		/* align-items: center; */
		background: linear-gradient(to bottom, #7ABCFE, #F7F7F7);
	}
	.bigView{
		background-color: #F7F7F7;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.topView{
		width: 100vw;
		height: 500rpx;
		position: fixed;
		z-index: 0px;
		// background: linear-gradient(to bottom, #7ABCFE, #F7F7F7);
	}
	.topView2{
		width: 100vw;
		// background-color: red;
		display: flex;
		// align-items: center;
		justify-content: center;
	}
	.title{	
		position: absolute;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		z-index: 2;
		font-size: 16px;
		padding-left: 20px;
		font-weight: bold;
		color: #000000;
	}
	.contentBg{
		position: absolute;
	}
	.contentBg2{
		width: 100vw;
		height: 200px;
		// background-color: red;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.authView{
		width: 150px;
		background-color: #247BFD;
		height: 40px;
		border-radius: 20px;
		margin-top: 20px;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.first{
		display: flex;
		flex-direction: column;
		// width:95%;
		width: calc(100vw - #{30px});//calc(100vw-50px);
		// margin-top: 20px;
		border-radius: 10px;
		background-color: white;
		align-items: center;
		justify-content: center;
		margin-left: 15px;
		padding-bottom: 16rpx;
		// margin-top: 20px;
		&-item2{
			width: 100%;
			// width: calc(100vw - #{30px});
			width: calc(100vw - #{30px});
			height: 50px;
			// background-color: green;
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
			border-bottom: 1px solid #F7F7F7;
		}
	}

	.grid-text {
		font-size: 12px;
		color: #585858;
		padding: 10px 0 15px 0px;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	.jiarenshouce{
		height: 148rpx;
		background-color: white;
		width: calc(100vw - 30px);//calc(100vw-50px);
		margin-top: 20px;
		border-radius: 10px;
		background-color: white;
		margin-left: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.left {
	  flex-grow: 1; /* 让右侧div占据所有剩余空间 */
	  padding-left: 12px;
	  font-size: 16px;
	}
	
	.right {
	  background-color: lightgreen; /* 为了可视化 */
	}
</style>